<template>
    <div class="main">
        <div class="datarow">
            <p class="title">用户统计</p>
            <div class="userlist">
                <div class="student" >
                    <img src="../assets/user/student.png" STYLE="width:100%">
                    <p>学生用户</p>
                    <div class="number">{{stuNum}}</div>
                </div>
                <div class="teacher" >
                    <img src="../assets/user/teacher.png" STYLE="width:100%">
                    <p>教师用户</p>
                    <div class="number">{{teaNum}}</div>
                </div>
            </div>
        </div>
        <div class="datarow">
            <p class="title" >资源统计</p>
            <div class="datalist" id="datalist">
            </div>
        </div>

    </div>
</template>

<script>
import * as echarts from 'echarts'
import { getResourcecount } from '@/api/resource'
import { getUserNum } from '@/api/user'

export default {
  name: 'DataStatistics',
  components: {
  },
  data() {
    return {
        chart: '',
        subjects : ["政治", "语文", "数学", "物理", "化学", "生物", "地理", "历史", "体育", "音乐", "美术", "英语"],
        resourceNum : [],
        searchlabel:'',
        stuNum:0,
        teaNum:0
    }
  },
  mounted() {
    getResourcecount().then(response => {
        if (response.data.code === 200) {
        //   console.log(response.data.data)
          this.resourceNum=response.data.data.slice(0,12)
          this.initCharts()
        }
      })
    getUserNum().then(response => {
        if (response.data.code === 200) {
        console.log(response.data.data)
        this.stuNum = response.data.data[0]
        this.teaNum = response.data.data[1]
        }
      })
  },
  methods: {
    initCharts() {
      this.chart = echarts.init(document.getElementById('datalist'))
      this.chart.on('click', (event) => {
          console.log(event.name)
          this.nodeClick(event.name)
        })
      const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
            type: 'shadow'
            }
        },
        grid: {
            left: '1%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
            type: 'category',
            data: this.subjects,
            axisTick: {
                alignWithLabel: true
            },
            axisLabel: {
                rotate: 45, 
                fontSize: 10
            }
            }
        ],
        yAxis: [
            {
            type: 'value',
            axisLabel: {
                fontSize: 8
            }
            }
        ],
        series: [
            {
            name: '资源数量',
            type: 'bar',
            barWidth: '60%',
            data: this.resourceNum,
            itemStyle: {
                color: 'rgb(15, 135, 204)'
            }
            }
        ]
        }
        this.chart.setOption(option)
    },
    nodeClick(name) {
      this.searchlabel=name
      this.$router.push({
        path: '/Search',
        query: {
          q: this.searchlabel,
        }
      })
    },
    
  }
}
</script>

<style scoped>
.main{
    height: 403px;
    background-color: #fdfbfb;
}
.datarow{
    display: flex;
    flex-direction: column;
}

.title{
  padding-left: 1.2rem;
  padding-right: 1.2rem;
  font-size: 1rem;
  margin-top: 0.8rem;
  padding-bottom: 0.5rem;
}
.userlist{
    display: flex;
    width: 35%;
}
.student{
    width: 20%;
    margin-left: 10%;
}
.student p{
    font-size: 0.8rem;
    text-align: center;
    margin-top: -10%;
}
.teacher{
    width: 20%;
    margin-left: 10%;
}
.teacher p{
    font-size: 0.8rem;
    text-align: center;
    margin-top: -10%;
}
.number{
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    margin-top: 3px;
    color: rgb(15, 135, 204);
}
.datalist{
    width: 24%;
    height: 200px;
    margin-top: -2.5rem;
}
</style>